<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>相册</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				background-color:skyblue;
				perspective: 800px;
			}
			
			
			.box{
				width: 200px;
				height: 200px;
				margin: auto;
				margin-top: 200px;
				position: relative;
				transform-style: preserve-3d;
				transform: rotateX(-30deg) rotateY(30deg);
				animation: a 5s infinite linear;
			}
			
			@keyframes a{
				100%{transform: rotateX(30deg) rotateY(720deg);}
				
			}
			
			.box .d div{
				width: 200px;
				height: 200px;
				position: absolute;
				text-align: center;
				line-height: 200px;
				top: 0;
				left: 0;
				transition: all 2s;
			}
			
			.box .z div{
				
					width: 100px;
					height: 100px;
					position: absolute;
					text-align: center;
					line-height: 100px;
					top: 50px;
					left: 50px;
					
				
			}

			.top1{
				transform: rotateX(90deg) translateZ(50px);
				
			}
			
			.bottom1{
				transform: rotateX(-90deg) translateZ(50px);
				
			}
			
			.left1{
				transform: rotateY(90deg) translateZ(50px);
				
			}
			
			.right1{
				transform: rotateY(-90deg) translateZ(50px);
				
			}
			
			.front1{
				transform: translateZ(50px);
				
			}
			
			.back1{
				transform: translateZ(-50px);
				
			}
			
			
			
			
			
			.top{
				transform: rotateX(90deg) translateZ(100px);
				
			}
			
			.bottom{
				transform: rotateX(-90deg) translateZ(100px);
				
			}
			
			.left{
				transform: rotateY(90deg) translateZ(100px);
				
			}
			
			.right{
				transform: rotateY(-90deg) translateZ(100px);
				
			}
			
			.front{
				transform: translateZ(100px);
				
			}
			
			.back{
				transform: translateZ(-100px);
				
			}
			
			.box:hover .top{
				transform: rotateX(90deg) translateZ(200px);
			}
			.box:hover .bottom{
				transform: rotateX(-90deg) translateZ(200px);
			}
			.box:hover .left{
				transform: rotateY(90deg) translateZ(200px);
			}
			.box:hover .right{
				transform: rotateY(-90deg) translateZ(200px);
			}
			
			.box:hover .front{
				transform:translateZ(200px);
			}
			
			.box:hover .back{
				transform: translateZ(-200px);
			}
			
			.box .d img{
				width: 200px;
				height: 200px;
				display: block;
			}
			
			.box .z .img{
				width: 100px;
				height: 100px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="z">
			<div class="top1"><img class="img" src="img/1.jpg" ></div>
			<div class="bottom1"><img class="img" src="img/2.jpg" ></div>
			<div class="left1"><img class="img" src="img/3.jpg" ></div>
			<div class="right1"><img class="img" src="img/4.jpg" ></div>
			<div class="front1"><img class="img" src="img/5.jpg" ></div>
			<div class="back1"><img class="img" src="img/6.jpg" ></div>
			</div>
			<div class="d">
			<div class="top"><img src="img/7.jpg" ></div>
			<div class="bottom"><img src="img/8.jpg" ></div>
			<div class="left"><img src="img/9.jpg" ></div>
			<div class="right"><img src="img/10.jpg" ></div>
			<div class="front"><img src="img/11.jpg" ></div>
			<div class="back"><img src="img/12.jpg" ></div>
			</div>
		</div>
	</body>
</html>
